<!--  -->
<template>
  <button
          class="vd-button"
          :class="[
          `vd-button--${type}`,
          {'is-plain':plain},
          {'is-disabled':disabled},
          {'is-round':round},
          {'is-circle':circle},
          ]
">
    <i class="vd-icon" :class="icon" v-if="icon"></i>
    <span v-if="$slots.default"><slot></slot></span>
  </button>
</template>

<script>
  //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
  //例如：import 《组件名称》 from '《组件路径》';

  export default {
    name: "VdButton",
    props: {
      type: {
        type: String,
        default: 'default'
      },
      plain: {
        type: Boolean,
        default: false
      },
      disabled: {
        type: Boolean,
        default: false
      },
      round: {
        type: Boolean,
        default: false
      },
      circle: {
        type: Boolean,
        default: false
      },
      icon: {
        type: String,
        default: ''
      }
    },
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      //这里存放数据
      return {};
    },
    mounted() {
      //console.log(this.$slots)
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/config";
  @mixin vd-h-colors($color, $bd-color, $bg-color) {
    color: $color;
    border-color: $bd-color;
    background-color: $bg-color;
  }
  .vd-button {
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    color: #606266;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
    -moz-user-svdect: none;
    -webkit-user-svdect: none;
    -ms-user-svdect: none;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    &:focus {
      @include vd-h-colors(#409eff, #c6e2ff, #ecf5ff);
    }
    &:hover {
      @include vd-h-colors(#409eff, #c6e2ff, #ecf5ff);
    }
    &i{
      background: #00ff00;

    }
    & [class*=vd-icon]+span{
      margin-left: 5px;
    }
    &.is-disabled{
      cursor:not-allowed
    }
    /* 主要 */
    &.vd-button--primary {
      @include vd-h-colors(#fff, #409eff, #409eff);
      &:focus {
        @include vd-h-colors(#fff, #66b1ff, #66b1ff);
      }
      &:hover{
        @include vd-h-colors(#fff, #66b1ff, #66b1ff);
      }
      &.is-disabled{
        @include vd-h-colors(#fff, #a0cfff, #a0cfff);
        &:focus{@include vd-h-colors(#fff, #a0cfff, #a0cfff);}
        &:hover{@include vd-h-colors(#fff, #a0cfff, #a0cfff);}
      }
      &.is-plain{
        @include vd-h-colors(#409eff, #b3d8ff, #ecf5ff);
        &:focus{@include vd-h-colors(#fff, #409eff, #409eff);}
        &:hover{@include vd-h-colors(#fff, #409eff, #409eff);}
        &.is-disabled{
          @include vd-h-colors(#8cc5ff, #d9ecff, #ecf5ff);
          &:focus{@include vd-h-colors(#8cc5ff, #d9ecff, #ecf5ff);}
          &:hover{@include vd-h-colors(#8cc5ff, #d9ecff, #ecf5ff);}
        }
      }
    }
    /* 成功 */
    &.vd-button--success {
      @include vd-h-colors(#fff, #67c23a, #67c23a);
      &:focus{@include vd-h-colors(#fff, #85ce61, #85ce61);}
      &:hover{@include vd-h-colors(#fff, #85ce61, #85ce61);}
      &:active{outline:none;@include vd-h-colors(#fff, #5daf34, #5daf34);}
      &.is-disabled{
        @include vd-h-colors(#fff, #b3e19d, #b3e19d);
        &:focus{@include vd-h-colors(#fff, #b3e19d, #b3e19d);}
        &:hover{@include vd-h-colors(#fff, #b3e19d, #b3e19d);}
        &:active{@include vd-h-colors(#fff, #b3e19d, #b3e19d);}
      }
      &.is-plain{
        @include vd-h-colors(#67c23a, #c2e7b0, #f0f9eb);
        &:focus{@include vd-h-colors(#fff, #67c23a, #67c23a);}
        &:hover{@include vd-h-colors(#fff, #67c23a, #67c23a);}
        &:active{@include vd-h-colors(#fff, #5daf34, #5daf34);outline:none}
        &.is-disabled{
          @include vd-h-colors(#a4da89, #e1f3d8, #f0f9eb);
          &:focus{@include vd-h-colors(#a4da89, #e1f3d8, #f0f9eb);}
          &:hover{@include vd-h-colors(#a4da89, #e1f3d8, #f0f9eb);}
          &:active{@include vd-h-colors(#a4da89, #e1f3d8, #f0f9eb);outline:none}
        }
      }
    }
    /* 信息 */
    &.vd-button--info {
      @include vd-h-colors(#fff, #909399, #909399);
      &:focus{@include vd-h-colors(#fff, #a6a9ad, #a6a9ad);}
      &:hover{@include vd-h-colors(#fff, #a6a9ad, #a6a9ad);}
      &:active{@include vd-h-colors(#fff, #82848a, #82848a);outline:none}
      &.is-disabled{
        @include vd-h-colors(#fff, #c8c9cc, #c8c9cc);
        &:focus{@include vd-h-colors(#fff, #c8c9cc, #c8c9cc);}
        &:hover{@include vd-h-colors(#fff, #c8c9cc, #c8c9cc);}
        &:active{@include vd-h-colors(#fff, #c8c9cc, #c8c9cc);}
      }
      &.is-plain{
        @include vd-h-colors(#909399, #d3d4d6, #f4f4f5);
        &:focus{@include vd-h-colors(#fff, #909399, #909399);}
        &:hover{@include vd-h-colors(#fff, #909399, #909399);}
        &:active{@include vd-h-colors(#fff, #82848a, #82848a);outline:none}
        &.is-disabled{
          @include vd-h-colors(#bcbec2, #e9e9eb, #f4f4f5);
          &:focus{@include vd-h-colors(#bcbec2, #e9e9eb, #f4f4f5);}
          &:hover{@include vd-h-colors(#bcbec2, #e9e9eb, #f4f4f5);}
          &:active{@include vd-h-colors(#bcbec2, #e9e9eb, #f4f4f5);outline:none}
        }
      }
    }
    /* 警告 */
    &.vd-button--warning {
      @include vd-h-colors(#fff, #e6a23c, #e6a23c);
      &:focus{@include vd-h-colors(#fff, #ebb563, #ebb563);}
      &:hover{@include vd-h-colors(#fff, #ebb563, #ebb563);}
      &:active{@include vd-h-colors(#fff, #cf9236, #cf9236);outline:none}
      &.is-disabled{
        @include vd-h-colors(#fff, #f3d19e, #f3d19e);
        &:focus{@include vd-h-colors(#fff, #f3d19e, #f3d19e);}
        &:hover{@include vd-h-colors(#fff, #f3d19e, #f3d19e);}
        &:active{@include vd-h-colors(#fff, #f3d19e, #f3d19e);outline:none}
      }
      &.is-plain{
        @include vd-h-colors(#e6a23c, #f5dab1, #fdf6ec);
        &:focus{@include vd-h-colors(#fff, #e6a23c, #e6a23c);}
        &:hover{@include vd-h-colors(#fff, #e6a23c, #e6a23c);}
        &:active{@include vd-h-colors(#fff, #cf9236, #cf9236);outline:none}
        &.is-disabled{
          @include vd-h-colors(#f0c78a, #faecd8, #fdf6ec);
          &:focus{@include vd-h-colors(#f0c78a, #faecd8, #fdf6ec);}
          &:hover{@include vd-h-colors(#f0c78a, #faecd8, #fdf6ec);}
          &:active{@include vd-h-colors(#f0c78a, #faecd8, #fdf6ec);outline:none}
        }
      }
    }
    /* 危险 */
    &.vd-button--danger {
      @include vd-h-colors(#fff, #f56c6c, #f56c6c);
      &:focus{@include vd-h-colors(#fff, #f78989, #f78989);}
      &:hover{@include vd-h-colors(#fff, #f78989, #f78989);}
      &:active{@include vd-h-colors(#fff, #dd6161, #dd6161);outline:none}
      &.is-disabled{
        @include vd-h-colors(#fff, #fab6b6, #fab6b6);
        &:focus{@include vd-h-colors(#fff, #fab6b6, #fab6b6);}
        &:hover{@include vd-h-colors(#fff, #fab6b6, #fab6b6);}
        &:active{@include vd-h-colors(#fff, #fab6b6, #fab6b6);outline:none}
      }
      &.is-plain{
        @include vd-h-colors(#f56c6c, #fbc4c4, #fef0f0);
        &:focus{@include vd-h-colors(#fff, #f56c6c, #f56c6c);}
        &:hover{@include vd-h-colors(#fff, #f56c6c, #f56c6c);}
        &:active{@include vd-h-colors(#fff, #dd6161, #dd6161);outline:none}
        &.is-disabled{
          @include vd-h-colors(#f9a7a7, #fde2e2, #fef0f0);
          &:focus{@include vd-h-colors(#f9a7a7, #fde2e2, #fef0f0);}
          &:hover{@include vd-h-colors(#f9a7a7, #fde2e2, #fef0f0);}
          &:active{@include vd-h-colors(#f9a7a7, #fde2e2, #fef0f0);outline:none}
        }
      }
    }
    /* 圆角 */
    &.is-round {
      border-radius:20px;
      padding:12px 23px
    }
    /* 圆形 */
    &.is-circle {
      border-radius:50%;
      padding:12px
    }
  }




</style>
